<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 创建dmo根节点，一个页面中需要有一个根节点，这个节点下的内容会被react管理 -->
    <div id="app"></div>
</body>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
<!-- 使用react语法（jsx），记得type="text/babel" -->
<script type="text/babel">

    const title = "你好世界";
    const content = "我是一段文字";
    const age = 18;

    const user = {
        name: "奉先",
        sex: "男"
    }

    function getUser() {
        return user;
    }

    /* 
       {}使用表达式
    */
    let myDom = 
        (<div>
            <h1>
                {title}
            </h1>
            <p>{content}</p>
            <p>是否成年: {age >= 18 ? '是' : '否'}</p>
            <p>姓名：{getUser().name}</p>
            <p>性别：{getUser().sex}</p>
        </div>);

    // React17以前
    // ReactDOM.render(myDom, document.getElementById("app"));

    // React17以后创建根节点
    let root = ReactDOM.createRoot(document.getElementById("app"));

    // 渲染jsx对象
    root.render(myDom);
</script>

</html>